<template>
	<template v-if="goodDetail">
		<view class="relative">
			<u-swiper @click="preview" @change="bannerChange" :current="bannerCurrent" :list="goodDetail.ImageUrl" circular radius="0" height="375"></u-swiper>
			<view v-if="goodDetail.ImageUrl.length > 0" class="absolute right-0 bottom-[10px] z-10 px-[8px] py-[2px] text-[12px] text-[#ffffff] bg-[rgba(0,0,0,.8)] rounded-l-full">{{bannerCurrent+1}}/{{goodDetail.ImageUrl.length}}</view>
		</view>
		<view class="bg-[#FFFFFF] p-[16px]">
			<view class="flex flex-row items-baseline">
				<view class="first-letter:text-[14px] text-[18px] font-semibold text-[#d81e06]">¥{{goodDetail.MemberPrice}}</view>
				<view class="ml-[8px] text-[14px] text-[#999999] line-through">¥{{goodDetail.MarketPrice}}</view>
			</view>
			<view class="text-[14px] font-semibold text-[#333333] mt-[10px]">{{goodDetail.ProductName}}</view>
			<view class="text-[12px] text-[#999999] mt-[10px]">{{goodDetail.ShortTitle}}</view>
			<view class="text-[12px] text-[#999999] mt-[10px]">赠送积分：{{goodDetail.Integral}}</view>
			<view class="text-[12px] text-[#999999] mt-[10px]">库存：{{goodDetail.Quantity}}</view>
		</view>
		<u-gap height="10" bgColor="#f8f8f8"></u-gap>
		
		<u-divider text="宝贝详情"></u-divider>
		<u-parse :content="goodDetail.Content"></u-parse>
		<u-gap height="44" class="pb-safe-nopadding"></u-gap>
		
		<view class="bg-[#FFFFFF] fixed z-50 left-0 bottom-0 w-full h-[44px] pb-safe-nopadding box-content border-t-[1rpx] border-solid border-[#EEEEEE]">
			<view class="flex flex-row items-center px-[16px] h-[44px]">
				<u-icon v-if="false" class="mr-[16px]" name="shopping-cart" label="购物车" label-pos="bottom" size="24" label-size="12"></u-icon>
				<view @click="popupShow = true" class="flex-1 rounded-full flex flex-row items-center overflow-hidden">
					<view v-if="false" class="text-[14px] opacity-50 text-center text-[#FFFFFF] h-[36px] leading-[36px] flex-1 bg-[#d81e06]">加入购物车</view>
					<view class="text-[14px] text-center text-[#FFFFFF] h-[36px] leading-[36px] flex-1 bg-[#ff7900]">立即购买</view>
				</view>
			</view>
		</view>
		<u-popup :show="popupShow" mode="bottom" closeable round="8" @close="closePop">
			<view class="pt-[20px]">
				<view class="px-[16px] pt-[35px] flex flex-row justify-between items-center">
					<text class="text-[12px] text-[#1a1a1a] font-semibold">数量</text>
					<u-number-box v-model="buyNum" :min="1" :max="goodDetail.Quantity" integer></u-number-box>
				</view>
				<u-gap height="40"></u-gap>
				<u-line color="#eeeeee" direction="row"></u-line>
				<view class="flex flex-row items-center mx-[16px] my-[4px] rounded-full overflow-hidden">
					<view v-if="false" class="text-[14px] opacity-50 text-center text-[#FFFFFF] h-[36px] leading-[36px] flex-1 bg-[#d81e06]">加入购物车</view>
					<view @click="toSubmit()" class="text-[14px] text-center text-[#FFFFFF] h-[36px] leading-[36px] flex-1 bg-[#ff7900]">立即购买</view>
				</view>
			</view>
		</u-popup>
	</template>
</template>

<script setup>
	import {ref, unref} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	
	const goodDetail = ref();
	
	const bannerCurrent = ref(0);
	
	const bannerChange = e => {
		bannerCurrent.value = e.current;
	}
	
	const preview = index => {
		uni.previewImage({
			urls:unref(goodDetail).ImageUrl,
			current:index
		})
	}
	
	const popupShow = ref(false);
	const closePop = () => {
		popupShow.value = false;
	}
	
	const buyNum = ref(1);
	
	const toSubmit = () => {
		if(!store.isLogin) {
			uni.showToast({
				icon:'none',
				title:'请先登录',
				success() {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			})
			return
		}
		
		popupShow.value = false
		let params = uni.$u.deepClone(unref(goodDetail));
		delete params.Content;
		params.Num = buyNum.value;
		uni.navigateTo({
			url:`/pages/order/orderConfirm?goodDetail=${encodeURIComponent(JSON.stringify(params))}`
		})
	}
	
	uniapp.onLoad(async option => {
		uni.showLoading();
		const result = await api.getGoodsDetail(option.id);
		uni.hideLoading();
		if(result[0]) {
			goodDetail.value = result[0];
		} else {
			uni.showModal({
				content:result[1],
				showCancel:false,
				success(res) {
					uni.navigateBack();
				}
			})
		}
	})
</script>

<style>

</style>